<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>滑块验证码示例</title>
    <style>
        #captchaContainer {
            margin: 20px;
            position: relative;
            width: 300px;
            height: 150px;
            border: 1px solid #ccc;
        }

        #backgroundImage {
            width: 100%;
            height: 100%;
        }

        #sliderImage {
            width: 45px;
            height: 100%;
            position: absolute;
            top: 0;
            left: 0;
            cursor: pointer;
        }

        .range-slider {
            position: absolute;
            height: 100%;
            width: 50px;
            /*background-color: rgba(106, 160, 255, 0.8);*/
            border-radius: 3px;

            .range-btn {
                position: absolute;
                display: flex;
                align-items: center;
                justify-content: center;
                right: 0;
                width: 50px;
                height: 30px;
                background-color: #fff;
                border-radius: 3px;
                box-shadow: 0 0 4px #ccc;
                cursor: pointer;

                & > div {
                    width: 0;
                    height: 40%;
                    border: solid 1px #6aa0ff;
                    transition: all 200ms;

                    &:nth-child(2) {
                        margin: 0 4px;
                    }
                }

                &:hover,
                &.isDown {
                    & > div:first-child {
                        border: solid 4px transparent;
                        height: 0;
                        border-right-color: #6aa0ff;
                    }

                    & > div:nth-child(2) {
                        border-width: 3px;
                        height: 0;
                        border-radius: 3px;
                        margin: 0 6px;
                        border-right-color: #6aa0ff;
                    }

                    & > div:nth-child(3) {
                        border: solid 4px transparent;
                        height: 0;
                        border-left-color: #6aa0ff;
                    }
                }
            }
        }
    </style>
</head>
<body>
<h1>滑块验证码示例</h1>
<div id="captchaContainer">
    <img id="backgroundImage" alt="背景图片" title="背景图片">
    <img id="sliderImage" alt="滑块图片" title="滑块图片">
    <div class="range-slider" id="RangeSlider">
        <div class="range-btn" id="sliderBtn" onmousedown="dragStart(event)">
            <div></div>
            <div></div>
            <div></div>
        </div>
    </div>
</div>
<button onclick="refreshCaptcha()" style="margin-top: 40px">刷新验证码</button>

<script>
    let startX, offsetX;
    let sliderButton = document.getElementById('sliderBtn');
    let sliderContainer = document.getElementById('captchaContainer');
    let sliderImage = document.getElementById('sliderImage');
    let backgroundImage = document.getElementById('backgroundImage');
    let identity = '';

    function refreshCaptcha() {
        fetch('http://localhost:8080/captcha/get?key=123456&category=JIGSAW')
            .then(response => response.json())
            .then(data => {
                backgroundImage.src = data.originalImageBase64;
                sliderImage.src = data.sliderImageBase64;
                identity = data.identity; // 假设返回的JSON中包含一个identity字段
                startX = 0;
                offsetX = 0;
                sliderButton.style.left = startX;
                sliderImage.style.left = startX;
            })
            .catch(error => console.error('获取验证码失败:', error));
    }

    function dragStart(event) {
        sliderButton.classList.add('isDown');
        startX = event.clientX;
        offsetX = sliderButton.offsetLeft;
        document.addEventListener('mousemove', dragMove);
        document.addEventListener('mouseup', dragEnd);
    }

    function dragMove(event) {
        let dx = event.clientX - startX;
        let newLeft = Math.max(0, Math.min(offsetX + dx, sliderContainer.offsetWidth - sliderButton.offsetWidth));
        sliderButton.style.left = newLeft + 'px';
        sliderImage.style.left = newLeft + 'px';
    }

    function dragEnd(event) {
        document.removeEventListener('mousemove', dragMove);
        document.removeEventListener('mouseup', dragEnd);
        sliderButton.classList.remove('isDown');
        let coordinate = {
            x: sliderButton.offsetLeft,
            y: 5
        };

        const verifyData = {
            identity: identity,
            category: 'JIGSAW',
            coordinate: coordinate
        };

        fetch('http://localhost:8080/captcha/verify', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json'
            },
            body: JSON.stringify(verifyData)
        })
            .then(response => response.json())
            .then(data => {
                console.log('验证结果:', data);
                if (data && data === true) {
                    alert('验证成功!');
                } else {
                    alert('验证失败');
                    refreshCaptcha(); // 刷新验证码
                }
            })
            .catch(error => console.error('验证请求失败:', error));
    }

    // 页面加载时自动刷新验证码
    window.onload = refreshCaptcha;
</script>
</body>
</html>
